<template>
    <div>
      <div>
    <van-search @click="changeClick('/search')" placeholder="请输入搜索关键词" />
    </div>

          <div class="nows">
          <li  v-for="(data,index) in classifyList" :key="data.gc_id" @click="handleClick(data.gc_id,index)" :class="index===cactiveclass?'active':''">
            {{data.gc_name}}
          </li>
          </div>

        <div class="contentify" >

          <li v-for="data in itemlist" :key="data.gc_id" @click="foodClick(data.gc_id) " >
            <img :src="data.cate_img" alt="">
            <h2>{{data.gc_name}}</h2>
          </li>

       </div>
       <!-- //这个地方是结合computed做mapState的三种用法的 -->
          {{testData}}
          {{testid1}}
          {{testid2}}
          {{testid3}}
      </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Search } from 'vant'
import { mapActions, mapMutations ,mapState} from 'vuex'
Vue.use(Search)
export default {
  data () {
    return {
      classifyList: [],
      itemlist: [],
      cactiveclass: 0
    }
  },
  mounted () {
    console.log(this.$store.state);
    
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.transformRequest = [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
    // 然后再修改原型链
    Vue.prototype.$axios = axios
    axios({ // 获取分类数据
      method: 'post',
      url: '/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583302024001&act=mobile_cate&op=index'
    }).then(res => {
      this.classifyList = res.data.datas
      // const r = this.classifyList.gc_id
    })
    axios({
      method: 'post',
      url: '/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583302024001&act=mobile_cate&op=index',
      data: {
        gc_id: 1094
      }
    }).then(res => {
    //  console.log(res)
      this.itemlist = res.data.datas
      console.log(this.itemlist)
    })
  },

  //这个地方是测试mapState的另外三种用法的
  computed:mapState({
    testData(){
      return this.itemlist[0].gc_name
    },
    testid1:"city_id",
    testid2:state => state.city_id,
    testid3:function(state){
      return state.city_id
    }
  }),
  methods: {
    handleClick (gc_id, index) {
      axios({
        method: 'post',
        url: '/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583302024001&act=mobile_cate&op=index',
        data: {
          gc_id
        }
      }).then(res => {
        //  console.log(res)
        this.itemlist = res.data.datas
        console.log(this.itemlist)
      })
      // this.$router.push(`${id}`)
      this.cactiveclass = index
    },
    changeClick (path) {
      if (path === '/classify') {
        // 当路径等于path 的时候，清空vuex cinemaList
        this.setCinemaList([])
      }
      this.$router.push(path)
    },
    foodClick(id,name){
      console.log(id)
     this.$router.push(`/classify/foodlist/${id}`)
    },
    ...mapActions('classify', ['getCinemaAction']),
    ...mapMutations('classify', ['setCinemaList'])

  }
}

</script>
/*  */
<style lang="scss" scoped>
.nows{
  width: 30%;
  font-size: 16px;
  background-color: #eee;
  line-height: 20px;
 li{
   list-style:none;
   height: 30px;
   line-height: 30px;
   text-align: center;

 }
   .active{
     background: white;
     color:#d67839;
   }

}
.contentify{
  display: block;
  width: 60%;
  font-size: 16px;
  float: right;
  position: fixed;
  top: 50px;
  left: 35%;
  // background: gold;
  // height: 240px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  li{
    list-style: none;
    text-align: center;

    img{
      height: 99px;
      width: 99px;
    }
    h2{
      font-size: 16px;
    }
  }

}
</style>

